<template>
  <!-- 拜访列表 -->
  <div class="home">
    <div class="header">
      <van-icon name="arrow-left" @click="leftClick" />
      <div class="center">拜访记录</div>
      <div class="right" @click="newAddClick">新增</div>
    </div>
    <form action="/">
      <van-search
        v-model="value"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @input="onSeek"
      >
        <template #action>
          <div @click="onSeek">搜索</div>
        </template>
      </van-search> 
    </form>
    <ul>
      <li v-for="item in records" :key="item.id" @click="seeClick(item.id)">
        <div class="left">
          <div class="img">
            <img src="../assets/合作伙伴.png" alt="" />
          </div>
          <div class="center">
            <p>
              拜访标题<span>{{ item.visitTitle }}</span>
            </p>
            <p>
              客户名称<span>{{ item.custName }}</span>
            </p>
            <p>
              拜访时间<span>{{ item.visitTime }}</span>
            </p>
          </div>
        </div>
        <div class="right">定期回访</div>
      </li>
    </ul>
    <div v-if="showMore" class="bottom" @click="moreClick">
      展开更多<van-icon name="arrow-down" />
    </div>
    <div class="img" v-if="isShow">
      <van-empty description="搜索错误" />
    </div>
  </div>
</template>

<script>
import { GetInterview } from "../raxios/api";
export default {
  data() {
    return {
      value: "",
      records: [],
      showMore: true,
      mycurrent: 1,
      isShow:false
    };
  },
  methods: {
    leftClick() {
      this.$router.push('/home');
    },
    indexClick() {
      this.$router.push("/Main");
    },
    clientData() {
      GetInterview({
        keyword: this.value,
        current: this.mycurrent,
        size: "6",
      }).then((res) => {
        if (res.errCode == 0) {
        //   console.log(res.data.records);
          let { records } = res.data;
          this.records = records;
        }
      });
    },
    onSeek() {
       GetInterview({
        keyword: this.value,
        current: this.mycurrent,
        size: "6",
      }).then((res) => {
        if (res.errCode === 0) {
          // console.log(res);
          this.records = res.data.records;
        }
        // this.showLoading = false;
        if (res.data.records.length != 0) {
          this.showMore = true;
        } else {
          this.showMore = false;
          this.isShow = true;
        }
      });
    },
    moreClick() {
      this.mycurrent += 1;
      // this.showLoading = true;
      this.showMore = false;
      GetInterview({
        keyword: this.value,
        current: this.mycurrent,
        size: "6",
      }).then((res) => {
        if (res.errCode === 0) {
          this.records.push(...res.data.records);
        }
        // this.showLoading = false;
        if (res.data.records.length !== 0) {
          this.showMore = true;
        } else {
          this.showMore = false;
          this.isShow = true;
        }
      });
    },
    seeClick(id){
      this.$router.push("/home/SeeDetails?id="+id)
    },
    newAddClick(){
      this.$router.push('/home/Newsee')
    }
  },
  created() {
    this.clientData();
  },
};
</script>
 
<style lang="less" scoped>
.home{
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow:scroll;
    background-color:#efefef;
    z-index: 99;
}
.header {
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #003399;
  padding: 0.1rem;
  display: flex;
  justify-content: space-between;
  color: #fff;

  .van-icon {
    font-size: 0.28rem;
  }
  .center {
    font-size: 0.18rem;
    // margin-top: .06rem;
  }
  .right {
    font-size: 0.18rem;
  }
}
ul {
  margin-top: 0.1rem;
  li {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 0.1rem;
    border-bottom: 1px solid #f0f0f0;
    .left {
      display: flex;
      justify-content: space-between;
      .img {
        width: 0.6rem;
        height: 0.6rem;
        background-color: #eff2f4;
        margin-right: 0.1rem;
        img {
          width: 0.2rem;
          height: 0.2rem;
          margin-top: 0.16rem;
          margin-left: 0.16rem;
        }
      }
      .center {
        p {
          margin-bottom: 0.07rem;
          color: #bababa;
          span {
            margin-left: 0.1rem;
            color: #434343;
          }
        }
      }
    }
    .right {
      width: 0.8rem;
      height: 0.2rem;
      line-height: 0.2rem;
      text-align: center;
      background-color: #fff7e7;
      color: #fed5a5;
      border-radius: 0.05rem;
    }
  }
}
.bottom {
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  color: #4872c7;
  background-color: #fff;
  .van-icon {
    margin-left: 0.05rem;
  }
}
</style>